<template>
  <div class="top-info">
    <div class="header flx-justify-between">
      <div class="avatar-and-name flx-align-center">
        <img src="@/assets/images/client-img.png" />
        <div class="name">
          <div class="text">客户名称</div>
          <div class="client-name">
            <el-input v-model="params.name" placeholder="客户名称"></el-input>
          </div>
        </div>
      </div>
      <div class="right-btn">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </div>
    <ul class="info-list flx">
      <li class="item">
        <div class="label">客户级别</div>
        <div class="value">
          <el-select v-model="params.level" placeholder="请选择" style="width: 150px">
            <el-option v-for="item in [{ id: 1, name: '111' }]" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
      </li>
      <li class="item">
        <div class="label">客户状态</div>
        <div class="value">
          <div>待回款</div>
        </div>
      </li>
      <li class="item">
        <div class="label">业务类型</div>
        <div class="value pointer">
          <el-select multiple v-model="params.type" placeholder="请选择" style="width: 170px">
            <el-option
              v-for="item in [
                { id: 1, name: '111' },
                { id: 2, name: '222' }
              ]"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </li>
      <li class="item">
        <div class="label">客户来源</div>
        <div class="value">
          <div>推广</div>
        </div>
      </li>
      <li class="item">
        <div class="label">客户行业</div>
        <div class="value">
          <el-input v-model="params.industry" style="width: 104px"></el-input>
        </div>
      </li>
      <li class="item">
        <div class="label">所在地</div>
        <div class="value">
          <el-input v-model="params.location" style="width: 136px"></el-input>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from "vue";
const emit = defineEmits(["cancel", "save"]);

const params = ref({});
// 取消
const cancel = () => {
  emit("cancel");
};

// 保存
const save = () => {
  emit("save", params.value);
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
.top-info {
  .el-input,
  .el-select {
    height: 24px;
  }
  :deep(.el-select__wrapper) {
    min-height: 24px;
  }
  :deep(.el-tag.el-tag--info) {
    height: 18px !important;
  }
  .client-name {
    .el-input {
      width: 330px;
    }
  }
}
</style>
